<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="/favicon.ico">
  <title>document</title>
  <link rel="stylesheet" href="./css/vant.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/vue@2.6.4.js"></script>
  <script src="./js/vant.js"></script>
  <script src="./js/axios.js"></script>
</head>

<body>
  <div id="main" class="wrap">
    <div safe-area-inset-top>
      <van-notice-bar left-icon="volume-o" v-if="text" :text="text"></van-notice-bar>
    </div>
    <div class="content">
      <div class="btn">
        <van-button :disabled="loading" round :color="btn===1?'#ee0a24':'rgb(40, 48, 211)'" icon="plus" @click="add">加
        </van-button>
        <van-button :disabled="loading" round :color="btn===2?'#ee0a24':'rgb(40, 48, 211)'" icon="replay"
          @click="reset"> 刷 </van-button>
        <van-button :disabled="loading||!userinfo.glid" round :color="btn===0?'#ee0a24':'rgb(40, 48, 211)'" icon="minus"
          @click="del">减
        </van-button>
      </div>
      <div class="list">
        <div class="item" v-for="item in list" :key="item.mobile+item.key" @click="handle(item)"
          :class="{active:item.glid,hover:item.hover}">
          <span>{{item.mobile}} </span>
        </div>
      </div>
    </div>
    <div class="msg" safe-area-inset-bottom>已使用<span>{{total}}</span>次</div>

  </div>
  <script>
    const Userinfo = localStorage.getItem("userinfo");
    if (!Userinfo) {
      vant.Toast.fail('登录失效，请重新登录！');
      setTimeout(() => {
        location.href = "./index.html"
      }, 2000)
    }
    const option = {
      el: "#main",
      data: {
        loading: false,
        btn: '',
        text: "",
        total: 0,
        userinfo: JSON.parse(Userinfo) || {},
        list: [
          { glid: null, mobile: '牛皮' },
          { glid: null, mobile: '迈克' },
          { glid: null, mobile: '托尼' },
          { glid: null, mobile: '三夫' },
          { glid: null, mobile: '杰克' },
          { glid: null, mobile: '凯哥' },
          { glid: null, mobile: '琳达' },
          { glid: null, mobile: '赛瑞' },
          { glid: null, mobile: '黄金' },
          { glid: null, mobile: '吉米' }
        ],

      },
      created() {
        this.getTotal();
        this.getList();
      },
      methods: {
        handle(item) {
          this.list = this.list.map(e => {
            e.hover = false;
            if (e.mobile === item.mobile) e.hover = true;
            e.key = Math.random()
            return e;
          });
          this.userinfo.origin_user_id = item.mobile;
          this.userinfo.glid = item.glid;
        },
        async getTotal() {
          let { user_id: userid } = this.userinfo;
          let { data } = await axios({
            url: '/api/getnums',
            data: { userid }
          });
          this.total = data.nums || 0
        },
        async getList() {
          try {
            let { token, user_id: userid, } = this.userinfo;
            let { data } = await axios({
              url: '/api/getgdlist',
              data: { token, userid }
            });
            let list = data.data;
            this.list = this.list.map((e, i) => {
              let item = list.find(k => e.mobile === k.mobile);
              e.key = i;
              e.hover = false;
              if (item) return { ...e, ...item }
              else return e;
            })
          } catch (error) { }
          this.loading = false;
        },
        reset() {
          this.loading = true;
          this.btn = 2;
          this.getList();
        },
        async add() {
          this.loading = true;
          this.btn = 1;
          try {
            let { token, user_id: userid, origin_user_id } = this.userinfo;
            if (!origin_user_id) { vant.Toast.fail('请选择！'); throw ''; }
            let { data } = await axios({
              url: '/api/dobuyin',
              data: { token, userid, origin_user_id }
            });
            this.getTotal();
            this.getList();
          } catch (error) { }
          this.loading = false;
        },
        async del() {
          this.loading = true;
          this.btn = 0;
          try {
            let { glid, token, user_id: userid } = this.userinfo;
            if (!glid) { vant.Toast.fail('请选择！'); throw ''; }
            let { data } = await axios({
              url: '/api/dobuyout',
              data: { glid, token, userid }
            });
            this.userinfo.origin_user_id = "";
            this.userinfo.glid = "";
            this.getTotal();
            this.getList();
          } catch (error) { }
          this.loading = false;
        }
      },
    }
    window.VM = new Vue(option)
  </script>
</body>

</html>